﻿<template>

<!--  顶部导航栏-->
  <TopMenu/>

<!--  主体区域-->
  <div>
<!--    背景-->
    <div style="width: 100%;height: 90vh;overflow: hidden;opacity:0.8;background-color: lightgray;">

      <!--检测结果数据区域-->
      <el-row style="width: 100%; display: flex; align-items: center; justify-content: center;">

        <el-col :span="12">
          <div class="text">
            <span class="mx-1">Class of Defect：</span>
            <span style="text-decoration: underline;">{{ classification }}</span>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="text">
            <span class="mx-1" >Score：</span>
            <span style="text-decoration: underline;"> {{ score }}</span>
          </div>
        </el-col>
      </el-row>

      <!--图像显示区域-->
      <el-row>
        <el-col :span="12" style="width: 100%; height: 70%;">
          <div class="image">
            <el-image :src="url_result" style="width: 100%; height: 100%;">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
              <template #error>
                <div class="image-slot" >
                  <i class="el-icon-picture-outline"></i>
                </div>
              </template>
            </el-image>
          </div>
        </el-col>
      </el-row>



   </div>
  </div>


</template>

<script>
import TopMenu from "@/components/TopMenu.vue";

export default {
  name: "ImageGUI",
  components: {TopMenu},

  data() {
    return {
      url_result:require('@/assets/imgs/0_007_result.png'), //即src/assets目录下
      url_hot: '', // 热力图URL
      url_seg: '', // 分割图URL
      selectedFile: null, // 用于存储选择的文件对象
      classification: '1',
      score:'95.7',
    };
  },

  // 在进入界面时调用 clearImage 方法
  created() {
    this.clearImage();
  },

  // 在组件销毁时调用 clearImage 方法
  unmounted() {
    this.clearImage();
  },

  methods: {

    clearImage() {
      // 清除图片 URL 和撤销临时对象 URL
      if (this.selectedFile) {
        URL.revokeObjectURL(this.selectedFile);
      }
      this.selectedFile = null;
    },

  }
};
</script>

<style>

.text{
  margin: 10% 10% 0% 45%;
}

  /* 添加图片显示区域的边框和背景色 */
  .image {
    width:  160%;
    height: 95%;
    background-color: #fff; /* 白色背景 */
    border-radius: 4px; /* 边框圆角 */
    margin: 10% 10% 10% 20%;
    padding: 0; /* 根据需要调整内边距 */
  }



</style>
